body{
    //28px
   font-size: .373333rem;
   padding-top: 3.386667rem;
   padding-bottom:1.5rem;
}

// header
.header{
    // 78px
    height:1.04rem;
    display: flex;
}

.logo{
    // 104px
    width: 1.386667rem;
    margin-top: .16rem;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
        //50px
        width: .666667rem;
    }
}
.search{
    background-color:#fff;
    flex:1;
    // 12px
    margin-top: .16rem;
    // 66px
    height: .88rem;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius:3px;
    // 64px
    line-height: .853333rem;
    .iconfont{
         //font-size: 30px;
         font-size: .4rem;
        //20px
         margin-left: .266667rem;
    }
    input{
        // font-size: 30px;
        font-size: .4rem;
        width: 70%;
    }
}
.my{
    // 104px
    width: 1.386667rem;
    .iconfont{
        //font-size: 30px;
        font-size: .4rem;
    }
    display: flex;
    margin-top: .16rem;
    justify-content: center;
    align-items: center;
}
// 导航
.nav{
    background-color:#f2f2f2;
    // height: 2rem;
    // x偏移 y偏移 模糊 颜色
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 9;
}
.navList{
    // 64px
    height: .853333rem;
    margin-top: .106667rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    li{
        // border: 1px solid #000;
        &:first-child{
            height: 100%;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            border-bottom: 3px solid #ff6b00;
        }
        &:first-child a{
            color:#ff6b00;  
        }
        
    }
}


// banner样式
.banner{
    width: 100%;
    overflow: hidden;
    ul{
        width: 400%; 
        display: flex;
        li{
            flex:1;
        }
        // animation: lun 6s steps(3) infinite;
         animation: lun 10s linear infinite;
     }
}

// @keyframes lun {
//     0%{
//         transform: translateX(0);
//     }

//     100%{
//         transform: translateX(-300vw);
//     }
// }

@keyframes lun {
    0%{
        transform: translateX(0);
    }
    23%{
        transform: translateX(-100vw);
    }
    33%{
        transform: translateX(-100vw);
    }
    56%{
        transform: translateX(-200vw);
    }
    66%{
        transform: translateX(-200vw);
    }
    89%{
        transform: translateX(-300vw);
    }
    100%{
        transform: translateX(-300vw);
    }
}

// 菜单
.menu{
    ul{
        display: flex;
        flex-wrap: wrap;
        li{
            width: 20%;
        }
    }
    
}

.hotSale{
    margin-top: .1333rem;
    ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li{
            width: 49%;
            &:nth-child(2){
                a{
                    margin-top: .0667rem;
                    display: block;
                }
            }
        }
    }
}

.hot{
    background-color: #fff;
    margin-bottom: .2667rem;
    ul{
        display: flex;
        justify-content:space-around;
        flex-wrap: wrap;
        li{
            width: 48%;
           margin-top: .2667rem;
            text-align: center;
            
            .name{
                color:#333;
                font-size: .3467rem;
            }
            .type{
                color:#666;
                font-size: .2667rem;
            }
            .price{
                color:#ea625b;
                del{
                    color:#666;
                }
            }
            .btn{
                width: 80%;
                height:1rem;
                line-height: 1rem;
                background-color: #ea625b;
                color:#fff;
                margin: auto;
                border-radius:0.1rem;
                margin-top: .1333rem;
            }
        }
        
    }
    .more{
        height: 1.6rem;
        line-height: 1.6rem;
        border-top: 1px solid #eee;
        text-align: center;
        color:#999;
        display: block;
        margin-top:0.2667rem;
    }
}

.others{
    ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li{
            width: 49.4%;
           margin-top: .1067rem;

        }
    }
}




.tab{
    width: 100%;
    height: 1.386667rem;
    background-color: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    ul{
        display: flex;
        height: 100%;
        justify-content:space-evenly;
        align-items: center;
        text-align: center;
    }
    .iconfont{
        font-size: .5rem;
        color: #999;
    }
    p{
        font-size: .373333rem;
        color: #999;
    }
    .cur span{
        color:#ff6b00;
    }
    .cur p{
        color:#ff6b00;
    }
}




